<template>
  <div>
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide>
        <div class="slide-bg" style="background-image: url(static/img/index-1.jpg); background-color: #502e08">
          <img class="logo" src="static/img/cq-logo.png" />          
          <i class="up-arrow"></i>
          <img class="taste" src="static/img/taste.png" @click="taste()" />
          <img class="drive" src="static/img/drive.png" @click="showReservation()" />          
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="slide-bg wm" @click="showMask(2)" style="background-image: url(static/img/index-2.png); background-size: cover; background-color: #502e08">
          <img class="logo" src="static/img/cq-logo.png" />
          <img class="title" :class="{show: title2show}" src="static/img/title-2.png" />
          <i class="up-arrow"></i>
          <img class="reservation" src="static/img/reservation.png" @click.stop="showReservation" />
          
          <div class="mask" v-show="mask2show" @click.stop>
            <img class="close" src="static/img/close.png" @click="closeMask(2)" />
          </div>
          <swiper v-show="mask2show" class="swiper-small" :options="swiperOptionSmall2" ref="mySwiperSmall">
            <swiper-slide>
              <div class="slide-bg" style="background-image: url(static/img/index-1-1.jpg); background-size: cover;">        
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="slide-bg" style="background-image: url(static/img/index-1-2.jpg); background-size: cover;">        
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="slide-bg" style="background-image: url(static/img/index-1-3.jpg); background-size: cover;">        
              </div>
            </swiper-slide>

            <div class="swiper-button-prev prev2" slot="button-prev"></div>
            <div class="swiper-button-next next2" slot="button-next"></div>
          </swiper>
          
          <div class="wave animate" v-show="title2show">
              <div class="w1"></div>
              <div class="w2"></div>
              <div class="w3"></div>
              <!-- <div class="w4"></div> -->
          </div>
        </div>        
      </swiper-slide>
      <swiper-slide>
        <div class="slide-bg wm" @click="showMask(3)" style="background-image: url(static/img/index-3.jpg); background-size: cover; background-color: #502e08">
          <img class="logo" src="static/img/cq-logo.png" />
          <img class="title" :class="{show: title3show}" src="static/img/title-3.png" />                  
          <i class="up-arrow"></i>
          <img class="reservation" src="static/img/reservation.png" @click.stop="showReservation" />

          <div class="mask" v-show="mask3show" @click.stop>
            <img class="close" src="static/img/close.png" @click="closeMask(3)"  />
          </div>
           <swiper v-show="mask3show" class="swiper-small" :options="swiperOptionSmall3" ref="mySwiperSmall2">
            <swiper-slide>
              <div class="slide-bg" style="background-image: url(static/img/index-2-1.jpg); background-size: cover;">        
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="slide-bg" style="background-image: url(static/img/index-2-2.jpg); background-size: cover;">        
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="slide-bg" style="background-image: url(static/img/index-2-3.jpg); background-size: cover;">        
              </div>
            </swiper-slide>

            <div class="swiper-button-prev prev3" slot="button-prev"></div>
            <div class="swiper-button-next next3" slot="button-next"></div>
          </swiper>

          <div class="wave animate" v-show="title3show">
              <div class="w1"></div>
              <div class="w2"></div>
              <div class="w3"></div>
              <!-- <div class="w4"></div> -->
          </div>
        </div>        
      </swiper-slide>
      <swiper-slide>
        <div class="slide-bg wm" @click="showMask(4)" style="background-image: url(static/img/index-4.jpg); background-size: cover; background-color: #502e08">
          <img class="logo" src="static/img/cq-logo.png" />
          <img class="title" :class="{show: title4show}" src="static/img/title-4.png" />                   
          <!--<i class="up-arrow"></i>-->
          <img class="reservation" src="static/img/reservation.png" @click.stop="showReservation" />

          <div class="mask" v-show="mask4show" @click.stop>
            <img class="close" src="static/img/close.png" @click="closeMask(4)" />
          </div>
           <swiper v-show="mask4show" class="swiper-small" :options="swiperOptionSmall4" ref="mySwiperSmall3">
            <swiper-slide>
              <div class="slide-bg" style="background-image: url(static/img/index-3-1.jpg); background-size: cover;">        
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="slide-bg" style="background-image: url(static/img/index-3-2.jpg); background-size: cover;">        
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="slide-bg" style="background-image: url(static/img/index-3-3.jpg); background-size: cover;">        
              </div>
            </swiper-slide>
            

            <div class="swiper-button-prev prev4" slot="button-prev"></div>
            <div class="swiper-button-next next4" slot="button-next"></div>
          </swiper>      

          <div class="wave animate" v-show="title4show">
              <div class="w1"></div>
              <div class="w2"></div>
              <div class="w3"></div>
              <!-- <div class="w4"></div> -->
          </div>        
        </div>        
      </swiper-slide>
    </swiper>

    <modal :show="showModal" @close="showModal = false"></modal>
  </div>
</template>

<style lang="less">
.up-arrow {
  width: 44px;
  height: 20px;
  background: url(../assets/img/up.png) no-repeat top center;
  background-size: contain;
  position: absolute;
  bottom: 10px;
  left: 50%;
  margin-left: -22px;
  animation: up-breath 1.5s ease-out;
  animation-iteration-count: infinite;
}
.reservation {
  width: 35px;
  position: absolute;
  top: 20%;
  right: 0;
  z-index: 100;
}
.logo {
  width: 130px;
  top: 10px;
  left: 20px;
  position: absolute;
}
.taste, .drive {
  position: absolute;
  top: 114vw;
  right: 28vw;
  height: 9vw;
}
.drive {
  right: 0;
}
.title {
  width: 126px;
  left: 30px;
  bottom: 46px;
  position: absolute;
  opacity: 0;
  transform: translate3D(-50px, 0, 0);
  transition: all ease-out 0.6s;

  &.show { opacity: 1; transform: translate3D(0, 0, 0) }
}
.swiper-container.swiper-small {
  height: 240px;
  left: 0;
  top: 50%;
  margin-top: -150px;
  position: absolute;
  z-index: 1000;
  background: #000;
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
  background: url(../assets/img/prev.png) !important;
  background-size: cover !important;
  width: 40px !important;
  height: 45px !important;
}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
  background: url(../assets/img/next.png) !important;
  background-size: cover !important;
  width: 40px !important;
  height: 45px !important;
}

.wm::before {
  content: ' ';
  background-image: url(../assets/img/white_mask.png);
  background-size: 100% 100%;
  position: absolute;
  width: 100%;
  height: 100px;
  top: 0;
  left: 0;
}

.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 200;
}

.close {
  width: 29px;
  height: 29px;
  position: absolute;
  right: 20px;
  top: 20px;
}

@keyframes opac{
	0% {
    opacity: 0;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
  }
  50% {
    opacity: 1;
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
  }
	100% {
    opacity : 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
}
.w1,.w2,.w3{
  visibility: hidden;
  opacity: 0;
}
.animate .w1{
	visibility:visible;
	animation:opac 2s infinite;
}
.animate .w2{
	visibility:visible;
	animation:opac 2s infinite;animation-delay:.4s;
}
.animate .w3{
	visibility:visible;
	animation:opac 2s infinite;animation-delay:.8s;
}
.wave{width: 100px; height:100px;position:absolute;top: 60%;right: 20%}
.wave *{/*border:3px solid #fff;*/position:absolute;border-radius:50%; background: #fff }
.w4{border-radius:0;width:20%;height:20%;top:35%;left:40%;border-left:0;border-top:0;transform:rotate(45deg);}

</style>

<script>
import log, { ACT } from '../log';
import modal from './modal';

export default {
  data() {
    return {
      showModal: false,
      title2show: false,
      title3show: false,
      title4show: false,
      mask2show: false,
      mask3show: false,
      mask4show: false,
      swiperOptionSmall2: { loop: true, navigation: { nextEl: '.next2', prevEl: '.prev2' } },
      swiperOptionSmall3: { loop: true, navigation: { nextEl: '.next3', prevEl: '.prev3' } },
      swiperOptionSmall4: { loop: true, navigation: { nextEl: '.next4', prevEl: '.prev4' } },
      swiperOption: {
        direction : 'vertical',
        on: {
          transitionEnd(swiper) {
            console.log(this.activeIndex);
            setTimeout(() => {
              if (this.activeIndex >= 1 && this.activeIndex <= 3) {
                window._pointer['title' + (this.activeIndex + 1) + 'show'] = true;
              }
            }, 50);
            if (this.activeIndex > 0) {
              log(ACT['page' + this.activeIndex]);
            }
          }
        },
          // on: {
          //   slideChangeTransitionStart() {
          //     _this.activeIndex = this.activeIndex
          //     console.log(this.activeIndex)
          //   }
          // }
      }
    }
  },
  components: { 
    modal
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  mounted() {
    log(ACT.home);
    window._pointer = this;
  },
  methods: {
    taste() {
      this.swiper.slideTo(1, 1000);
    },
    closeMask(id) {
      this['mask' + id + 'show'] = false;
    },
    showMask(id) {
      this['mask' + id + 'show'] = true;
    },
    showReservation() {
      this.showModal = true;
      log(ACT.reservation);
    }
  }
}
</script>